<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<div id="app">
		姓：<input type="text" placeholder="First Name" v-model="first" /></br>
		名：<input type="text" placeholder="Last Name" v-model="last" /></br>
		姓名1(单向)：<input type="text" placeholder="Full Name1"v-model="Fullname1" /></br>
		姓名2(单向)：<input type="text" placeholder="Full Name2"v-model="Fullname2" /></br>
		姓名3(双向)：<input type="text" placeholder="Full Name3"v-model="Fullname3" /></br>
	</div>
	<script src="../vue.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#app',
			data:{
				first:'a',
				last:'b',
				Fullname2:'a b'
			},
			computed:{
				// 什么时候执行：初始化显示或相关的data属性数据发生改变
				Fullname1() { // 计算属性中的一个方法，方法的返回值作为属性值
					return this.first +' '+ this.last
				},
				Fullname3: {
					// 回调函数，当需要读取当前属性值时回调，计算并返回当前属性值
					get() { 
						return this.first +' '+ this.last
					},
					// 回调函数，监视当前属性值的变化，当属性值发生改变时回调，更新相关的属性数据
					set(value) { // value就是fullname3的最新属性值
						var names = value.split(' ')
						this.first = names[0]
						this.last = names[1]
					}
				}
				
			},
			watch:{
				first(value){ // first发生了变化,this为vm对象
					this.Fullname2 = value + ' ' + this.last
				}
			}
		});
		vm.$watch('last',function(value) {
			this.Fullname2 = this.first + ' ' + value
		});
	</script>
</body>
</html>